<template>
    <el-form label-position="top" :model="formDate">
     <el-row :gutter="20">
       <el-col :span="8">
          <el-form-item label="部门名称" prop="deptName">
              <el-input size="large" placeholder="请输入部门名称" style="width: 350px" v-model="formDate.deptName"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="状态" prop="status">
            <el-select  placeholder="部门状态" style="width: 350px" v-model="formDate.status" size="large">
              <el-option label="正常" value="begin" />
              <el-option label="停用" value="end" />
            </el-select>
          </el-form-item>
       </el-col>
       <el-col :span="8" class="myBtn">
        <el-button type="primary" style="border-radius: 20px;width:80px;margin-right:420px" @click="SearchDate">搜索 </el-button>
       </el-col>
     </el-row>
    </el-form>
    <el-row >
        <el-col class="addBtn">
            <el-button type="primary" style="margin-right: 150px; border-radius: 20px; width:80px;" @click="newAdd('add')">新增 </el-button>
        </el-col>
    </el-row>
   <el-table
     :data="list"
     style="width: 100%; margin-bottom: 20px"
     row-key="id"
     default-expand-all
     stripe
     header-row-style="background-color: #f3f3f3;"
   >
     <el-table-column prop="userName" label="部门名称"  />
     <el-table-column prop="orderNum" label="排序" />
     <el-table-column prop="status" label="状态" >
      <template v-slot="{row}">
        <span>{{ row.status===0?'正常':'停用' }}</span>
      </template>
     </el-table-column>
     <el-table-column prop="createTime" label="创建时间"  />
     <el-table-column  label="操作">
      <template v-slot="{row}">
        <el-button type="text" @click="newAdd('emit',row.parentId)">修改</el-button>
        <el-button type="text" @click="delSectionAPI(row.parentId)">删除</el-button>
     </template>
      </el-table-column>
   </el-table>
   <el-dialog :title="showTitle" v-model="showDialog" @click="close">
      <el-divider style="margin-top: -10px;"/>
        <el-form style="margin-left: 50px;" :model="formDate" :rules="rules">
          <el-row>
            <el-col :span="12">
              <el-form-item label="上级部门:" prop="superiorDept">
                <el-tree-select size="large" v-model="formDate.superiorDept" :data="data" :render-after-expand="false" placeholder="请选择"/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="部门名称:" prop="deptName">
                <el-input placeholder="请输入" v-model="formDate.deptName" size="large"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="排序:" prop="ord">
                <el-select placeholder="请选择" size="large" v-model="formDate.ord"/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
             <el-form-item label="状态：" prop="status">
              <el-radio-group v-model="radio">
              <el-radio :label="0">启用</el-radio>
              <el-radio :label="1">停用</el-radio>
              <!-- <template v-slot="{row}">
                <span>{{ row.status===0?'启用':row.status===1?'停用':'无' }}</span>
              </template> -->
            </el-radio-group>
             </el-form-item>
          </el-row>
          <el-row type="flex" style="justify-content: center;">
            <el-button type="info" style="border-radius: 20px">取消</el-button>
            <el-button type="primary" style="border-radius: 20px">确定</el-button>
          </el-row>
        </el-form>
    </el-dialog>
   <!-- <add-depart v-model:showDialog="showDialog"></add-depart> -->
</template>

<script setup>
// import AddDepart from "./components/AddDepart.vue"
import {ref,onMounted} from "vue"
import {getSection,delSection,addSection,emitSection} from "@/api/section"
import { ElMessageBox, ElMessage } from 'element-plus'
// import {transListToTreeData} from "@/utils/index.js"
const formDate=ref({
  superiorDept:'',   //上级部门
  deptName:'',       //部门名称
  ord:'',            //排序规则
  status:'',         //状态 
  pageNum:1,
  pageSize:10,
  orderNum:'',
})
const pageParams=ref({
  pageNum:1,
  pageSize:10,
})
const showDialog= ref(false)  //弹层
//部门列表渲染
const list=ref([])
const getSectionAPI=async()=>{
const res=await getSection(pageParams.value)
console.log(res);
list.value=res.data
// list.value=transListToTreeData(res,0)
console.log(res);
}
onMounted(()=>{
  getSectionAPI()
})
//新增编辑
const showTitle=ref('')
 const newAdd=async(type,id)=>{
  if(type==='add'){
    showTitle.value='添加字典类型'
  }else if(type==='emit'){
    showTitle.value='修改字典类型'
    const data=await emitSection(id)
    formDate.value=data.data
  }
   showDialog.value=true
 }

//搜索功能
const SearchDate= async()=>{
  const res = await getSection(formDate.value)
  list.value=res.data.records

 }
//删除
const delSectionAPI=async(id)=>{
  ElMessageBox.confirm('确定删除该数据吗？').then(async()=>{
     await delSection(id)
     ElMessage.success('删除成功')
     getSectionAPI()
   })
}
</script>

<style scoped lang="scss">
.addDepart{
   display: flex;
   flex-wrap: wrap;
   justify-content: end;
   position: relative;
   box-sizing: border-box;
}
.myBtn{
  display: flex;
  justify-content: center;
 align-items: center;
}
.addBtn{
  display: flex;
  justify-content: end;
  height: 60px;
}
</style>